<template>
	<view class="container" v-if="levelInfo.length > 0">
		<view class="head-box" :class="'bg_'+(current+1)">
			<image class="bg-shadow" :src="'../../static/level'+(current+1)+'.png'"></image>
			<u-navbar title="升级会员" @rightClick="rightClick" :autoBack="true" :bgColor="bgColor"
			                :titleStyle="{color:'#FFFFFF'}" leftIconColor="#FFFFFF">
			            </u-navbar>
			<view class="swiper-box" :style="'padding-top:' + sysHeight + 'px'">
				<swiper class="swiper" circular  @change="changeBox">
					<swiper-item>
						<view class="swiper-item">
							<image class="item-bg" mode="aspectFit" :src="levelInfo[0].image"></image>
							<text class="level-name name-1">{{levelInfo[0].name}}</text>
							<view class="level-des des_1">
								{{levelInfo[0].name}}专享 等级{{levelInfo[0].level}}
							</view>
						</view>
					</swiper-item>
					<swiper-item>
						<view class="swiper-item">
							<image class="item-bg" mode="aspectFit" :src="levelInfo[1].image"></image>
							<text class="level-name name-2">{{levelInfo[1].name}}</text>
							<view class="level-des des_2">
								{{levelInfo[1].name}}专享 等级{{levelInfo[1].level}}
							</view>
						</view>
					</swiper-item>
					<swiper-item>
						<view class="swiper-item">
							<image class="item-bg" mode="aspectFit" :src="levelInfo[2].image"></image>
							<text class="level-name name-3">{{levelInfo[2].name}}</text>
							<view class="level-des des_3">
								{{levelInfo[2].name}}专享 等级{{levelInfo[2].level}}
							</view>
						</view>
					</swiper-item>
				</swiper>
			</view>
			<view class="quanyi-title">
				{{levelInfo[current].name}}可享权益
			</view>
			<view class="quanyi-box">
				
				<view class="quanyi-item-box">
					<view class="quanyi-item">
						<image class="item-img" :src="'../../static/quanyi_'+(current+1)+'/icon_1.png'"></image>
						<text class="item-title">海量优惠</text>
					</view>
					<view class="quanyi-item">
					<image class="item-img" :src="'../../static/quanyi_'+(current+1)+'/icon_2.png'"></image>
						<text class="item-title">自购佣金比例{{levelInfo[current].own_commission_rate}}%</text>
					</view>
					<view class="quanyi-item">
					<image class="item-img" :src="'../../static/quanyi_'+(current+1)+'/icon_3.png'"></image>
						<text class="item-title">团队收益最高{{levelInfo[current].equal_rate}}%</text>
					</view>
					<view class="quanyi-item">
					<image class="item-img" :src="'../../static/quanyi_'+(current+1)+'/icon_4.png'"></image>
						<text class="item-title">专属福利</text>
					</view>
					<view class="quanyi-item">
					<image class="item-img" :src="'../../static/quanyi_'+(current+1)+'/icon_5.png'"></image>
						<text class="item-title">专属客服</text>
					</view>
					<view class="quanyi-item">
					<image class="item-img" :src="'../../static/quanyi_'+(current+1)+'/icon_6.png'"></image>
						<text class="item-title">专属导师</text>
					</view>
				</view>
			</view>
		</view>
		<view class="level-info">
			<view class="taskTitlebar wd100bd" v-if="levelInfo[current].level != 1">做任务去升级</view>
			<view class="taskList wd100bd" v-if="levelInfo[current].level != 1">
				<view class="taskitem rowCenBet" v-for="(item,index) in levelInfo[current].task" :key="index">
					<image class="taskicon wd100bd" :src="item.icon" mode=""></image>
					<view class="infobox">
						<view class="mtitle">
							{{item.describe}}
						</view>
						<view class="leveltxt">
							{{item.title}}
						</view>
					</view>
					<view class="inviteBtn rowCenCen" @click="goInvite()">
						去邀请
					</view>
				</view>
			</view>
			<view :class="'subBtn btn_'+(current+1)" v-if="userInfo.level < levelInfo[current].level" @click="upLevel" style="position: fixed;bottom: 50rpx;right: 35rpx;">
				立即升级
			</view>
			
			<view class="subBtn disBtn" v-else style="position: fixed;bottom: 50rpx;right: 35rpx;">
				<span>
					当前已是{{levelInfo[current].name}} 左右滑动查看更多
				</span>
				
			</view>
		</view>
	</view>
</template>

<script>
	import * as UserApi from '@/api/user'
	export default {
		data() {
			return {
				bgColor: 'rgba(0, 0, 0, 0)',
				sysHeight: 44,
				current:0,
				levelInfo:[],
				userInfo:'',
			}
		},
		onLoad() {
			this.getUserInfo()
			uni.setNavigationBarColor({
				frontColor: '#ffffff', //只支持两种颜色
				backgroundColor: '#ffffff',
				animation: {
					duration: 1
				}
			})
			var that = this;
			// #ifdef MP-WEIXIN
			uni.getSystemInfo({
				success: (res) => {
					// 获取手机顶部状态栏的高度
					const statusBarHeight = res.statusBarHeight || 0;
					// 获取导航栏的高度（手机状态栏高度 + 胶囊高度 + 胶囊的上下间距）
					const menuButtonInfo = uni.getMenuButtonBoundingClientRect();
					const navBarHeight = menuButtonInfo.height + (menuButtonInfo.top - statusBarHeight) * 2;
					// 计算顶部图标距离
					this.sysHeight = statusBarHeight + navBarHeight;
				},
				fail: (err) => {
					console.error('获取系统信息失败:', err);
				},
			});
			// #endif
			this.getLevelList()


		},
		methods: {
			goInvite(){
				uni.navigateTo({
					url:"/pages/inviteFriends/inviteFriends"
				})
			},
			upLevel(){
				uni.showLoading({
					title:"验证中.."
				})
				UserApi.upLevel({'level':this.levelInfo[this.current].level}).then((res) => {
					uni.hideLoading()
					if(res.code == 1){
						this.$showSuccess(res.msg);
						setTimeout(function(){
							uni.switchTab({
								url:"/pages/user/user"
							})
						},600)
					}else{
						return this.$showError(res.msg);
					}
				}).catch((e) => {
					console.log(e);
					//return this.$toast('接口请求错误');
				})
			},
			getUserInfo(){
				UserApi.getUserInfo().then((res) => {
					if(res.code == 1){
						this.userInfo = res.data
					}
				}).catch((e) => {
					//return this.$toast('接口请求错误');
				})
			},
			getLevelList(){
				UserApi.getLevelList({}).then((res) => {
					this.levelInfo = res.data
				}).catch((e) => {
					return this.$toast('接口请求错误');
				})
			},
			rightClick() {
				console.log('rightClick');
			},
			leftClick() {
				console.log('leftClick');
			},
			changeBox(e){
				this.current = e.detail.current
				
				console.log(e);
			}

		}
	}
</script>

<style lang="scss">
	.bg_1{
		background-color: #818090;
	}
	.bg_2{
		background-color: #C5A67F;
	}
	.bg_3{
		background-color: #060830;
	}
	.btn_1{
		background-color: #818090;
	}
	.btn_2{
		background-color: #EBBA88;
	}
	.btn_3{
		background-color: #49475F;
	}
	.container {
		background-color: #ffffff;
		height: 100vh;
		.head-box {
			width: 100%;
			height: 1000rpx;

			//position: relative;
			.bg-shadow {
				position: absolute;
			}
		}

		.swiper-box {
			// background-color: red;
			width: 100%;
			height: 440rpx;
			.swiper{
				height: 100%;
				width: 100%;
				.swiper-item{
					height: 100%;
					text-align: center;
					position: relative;
					.item-bg{
						width: 100%;
					}
					.level-name{
						font-weight: bold;
						font-size: 64rpx;
						position: absolute;
					    left: 51px;
					    top: 38px;
					}
					.name-1{
						color: #555C6E;
					}
					.name-2{
						color: #A46C53;
					}
					.name-3{
						color: #C1C9EF;
					}
					.des_1{
						border: 1rpx solid #5D616B;
						color: #5D616B;
					}
					.des_2{
						border: 1rpx solid #87652D;
						color: #87652D;
					}
					.des_3{
						border: 1rpx solid #C1C9EF;
						color: #C1C9EF;
					}
					.level-des{
						position: absolute;
						left: 51px;
						top: 128px;
						width: 251rpx;
						height: 34rpx;
						box-shadow: 0rpx 20rpx 48rpx 0rpx rgba(11,36,98,0.18);
						font-weight: 400;
						font-size: 24rpx;
					}
				}
			}
		}

		
		.quanyi-title{
			padding: 0 60rpx;
			color: #ffffff;
		}
		.quanyi-box{
			
			.quanyi-item-box{
				width: 100%;
				display: flex;
				flex-direction: row;
				flex-wrap:wrap;
				.quanyi-item{
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
					width: 33.3%;
					margin-top: 35rpx;
					.item-img{
						width: 82rpx;
						height: 80rpx;
					}
					.item-title{
						margin-top: 10rpx;
						color:#FCFDFF;
						font-weight: 400;
						font-size: 24rpx;
					}
				}
			}
		}
		.level-info{
			width: 100%;
			background-color: #ffffff;
			padding-bottom: 48rpx;
			.taskTitlebar {
				font-size: 32rpx;
				font-weight: bold;
				color: #333333;
				padding: 30rpx;
			}
	
			.taskList {
				padding: 0 30rpx;
			
				.taskitem {
					margin-bottom: 50rpx;
			
					.taskicon {
						width: 80rpx;
						height: 80rpx;
					}
			
					.infobox {
						flex: 1;
						padding: 0 20rpx;
			
						.mtitle {
							font-size: 30rpx;
							font-weight: 500;
							color: #333333;
						}
			
						.leveltxt {
							font-size: 24rpx;
							font-weight: 500;
							color: #666666;
							margin-top: 6rpx;
						}
					}
			
					.inviteBtn {
						width: 133rpx;
						height: 58rpx;
						background: #FFFFFF;
						border: 2rpx solid #9A7250;
						border-radius: 29rpx;
						font-size: 26rpx;
						font-weight: 500;
						color: #9A7250;
					}
				}
			}
			
			.subBtn{
				margin: 0 auto;
				width: 680rpx;
				height: 84rpx;
				border-radius: 54rpx;
				text-align: center;
				line-height: 84rpx;
				color:#ffffff
			}
			.disBtn{
				background-color: #E6E6EA;
			}
		}
	}
</style>